import type { FC } from 'react'
import {
  memo,
} from 'react'
import { useTranslation } from 'react-i18next'
import InputSupportSelectVar from '@/components/workflow/nodes/_base/components/input-support-select-var'
import useConfig from './use-config'
import type { WaitNodeType } from './types'
import Field from '@/components/workflow/nodes/_base/components/field'
import ConditionWrap from '../if-else/components/condition-wrap'
import useAvailableVarList from '../_base/hooks/use-available-var-list'
import { Var, VarType, type NodePanelProps } from '@/components/workflow/types'

const i18nPrefix = 'workflow.nodes.wait'

const Panel: FC<NodePanelProps<WaitNodeType>> = ({
  id,
  data,
}) => {
  const { t } = useTranslation()
  const {
    readOnly,
    inputs,
    filterVar,
    handleAddCondition,
    handleUpdateCondition,
    handleRemoveCondition,
    handleTimeOutChange,
    handleIntervalChange,
    handleToggleConditionLogicalOperator,
    handleAddSubVariableCondition,
    handleRemoveSubVariableCondition,
    handleUpdateSubVariableCondition,
    handleToggleSubVariableConditionLogicalOperator,
    nodesOutputVars,
    availableNodes,
    varsIsVarFileAttribute,
  } = useConfig(id, data)
  const cases = inputs.cases

  const { availableVars, availableNodesWithParent } = useAvailableVarList(id, {
    onlyLeafNodeVar: false,
    filterVar: (varPayload: Var) => {
      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
    },
  })

  return (
    <div className='p-1'>
      <ConditionWrap
        nodeId={id}
        cases={[cases]}
        readOnly={readOnly}
        handleSortCase={() => { }}
        handleRemoveCase={() => { }}
        handleAddCondition={handleAddCondition}
        handleRemoveCondition={handleRemoveCondition}
        handleUpdateCondition={handleUpdateCondition}
        handleToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
        handleAddSubVariableCondition={handleAddSubVariableCondition}
        handleRemoveSubVariableCondition={handleRemoveSubVariableCondition}
        handleUpdateSubVariableCondition={handleUpdateSubVariableCondition}
        handleToggleSubVariableConditionLogicalOperator={handleToggleSubVariableConditionLogicalOperator}
        nodesOutputVars={nodesOutputVars}
        availableNodes={availableNodes}
        varsIsVarFileAttribute={varsIsVarFileAttribute}
        filterVar={filterVar}
      />
      <div className='px-4 py-2'>
        <Field title={t(`轮询时长(ms)`)} >
          <InputSupportSelectVar
            instanceId='prompt_speech_text'
            className={'shadow-xs bg-gray-50 border-gray-300 rounded-lg px-3 py-[6px] border'}
            value={inputs.interval + ''}
            promptMinHeightClassName={'min-h-[20px]'}
            onChange={handleIntervalChange}
            readOnly={readOnly}
            nodesOutputVars={availableVars}
            availableNodes={availableNodesWithParent}
            placeholder={!readOnly ? t(`${i18nPrefix}.speechTextPlaceholder`)! : ''}
            placeholderClassName='!leading-[21px]'
          ></InputSupportSelectVar>
        </Field>
        <Field title={t(`超时时长(ms)`)} >
          <InputSupportSelectVar
            instanceId='prompt_speech_text'
            className={'shadow-xs bg-gray-50 border-gray-300 rounded-lg px-3 py-[6px] border'}
            value={inputs.timeout + ''}
            promptMinHeightClassName={'min-h-[20px]'}
            onChange={handleTimeOutChange}
            readOnly={readOnly}
            nodesOutputVars={availableVars}
            availableNodes={availableNodesWithParent}
            placeholder={!readOnly ? t(`${i18nPrefix}.speechTextPlaceholder`)! : ''}
            placeholderClassName='!leading-[21px]'
          ></InputSupportSelectVar>
        </Field>
      </div>
      <div className='my-2 mx-3 h-[1px] bg-divider-subtle'></div>
      <Field
        title={t(`${i18nPrefix}.wait`)}
        className='px-4 py-2'
      >
        <div className='leading-[18px] text-xs font-normal text-text-tertiary'>{t(`${i18nPrefix}.waitDescription`)}</div>
      </Field>
    </div>
  )
}

export default memo(Panel)
